<template lang="html">
	<div :class="$style.recommendBox">
		<MNPanel title="相关推荐">
			<span :class="$style.btnBox" @click.stop="clickMore">
				<btn :cname="$style.btnClass">查看更多</btn>
				<svg :class="$style.refreshIcon" aria-hidden="true">
			    <use xlink:href="#icon-more"></use>
				</svg>
			</span>
			<div v-if="someBooks.length" :class="$style.list">
				<div :class="$style.bookBox" v-for="(item,index) in someBooks" :key="index" @click.stop="touchItem(item._id)">
					<img :class="$style.bookImg" :src="item.cover" alt="">
					<p :class="$style.bookTitle">{{item.title}}</p>
				</div>
			</div>
		</MNPanel>
	</div>
</template>
<script>
	import MNPanel from '../core/panel';
	import btn from '../core/btn';
	export default {
		props: {
			tipBooks: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		components: {
			MNPanel,
			btn
		},
		computed: {
			someBooks() {
				return this.tipBooks.slice(0,6);
			}
		},
		activated() {
			localStorage.removeItem('recommendBooks');
			this.CacheHelper.setItem('recommendBooks',this.tipBooks);
		},
		methods: {
			clickMore() {
				console.log('booklist');
				if (this.tipBooks!=null||this.tipBooks.length>0) {
					this.$router.push({name:'bookList',query:{tip:'相关推荐',list:this.tipBooks}});
				}
			},
			touchItem(bookId) {
				this.$emit('switchItem',bookId);
				console.log(bookId);
			}
		},
		deactivated() {
			localStorage.removeItem('recommendBooks');
		}
	}
</script>
<style lang="scss" module>
	.recommendBox {
		width: 100%;
		box-sizing: border-box;
		.btnBox {
			position: absolute;
			right: 0;
			text-align: right;
			box-sizing: border-box;
			.refreshIcon {
				width: 24px;
				height: 24px;
				color: #efefef;
			}
			.btnClass {
				font-size: 30px;
				background-color: #efefef;
				border: none;
			}
		}
		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding-top: 32px;
			padding-left: 32px;
			padding-right: 32px;
			background-color: #f5f5f5;
			.bookBox {
				width: 208px;
				margin-bottom: 10px;
				box-sizing: border-box;
				.bookImg {
					width: 100%;
					height: 270px;
					background: #eee;
					width: 100%;
				}
				.bookTitle {
					width: 100%;
					font-size: 27px;
					letter-spacing: 2px;
					/* 显示2行,多的文字隐藏 */
					overflow:hidden; 
					text-overflow:ellipsis;
					display:-webkit-box; 
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
				}
			}
			.bookBox:nth-child(3n-1) {
				margin-left: 31px;
				margin-right: 31px;
			}
		}
	}
</style>